/**
 * 天地图
 */
Vue.component('tdt-map', {
    props: {
        latlng: {
            type: Object,
        },
        height: {
            type: String,
            default: "400px"
        }
    },
    data: function () {
        return {
            tdtMapDivID: "mapDiv",
            tdtMap: {},
            options: [],
            selectArea: []
        }
    },
    mounted() {
        this.initMap()
    },
    methods: {
        initMap(){
            this.tdtMap = new T.Map(this.tdtMapDivID)
            if(this.latlng === null) {
                this.tdtMap.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12)
            } else {
                this.tdtMap.centerAndZoom(this.latlng, 12)
                this.addMark(this.latlng)
            }

            this.tdtMap.addEventListener("click", this.mapClick);
            this.loadArea()
        },
        //清除点位
        resetMap() {
            this.selectArea = []
            this.tdtMap.clearOverLays();
        },
        mapClick(e) {
            this.tdtMap.clearOverLays();
            this.addMark(e.lnglat)
            this.$emit('selected', e.lnglat);
        },
        addMark(lnglat) {
            //创建标注对象
            var marker = new T.Marker(lnglat);
            if(this.tdtMap) {
                //向地图上添加标注
                this.tdtMap.addOverLay(marker);
            }
        },
        // moveTo(lnglat) {
        //     this.tdtMap.centerAndZoom(lnglat, 17);
        // },
        //加载行政区划
        loadArea() {
            //创建对象
            // administrative = new T.AdministrativeDivision();
            // let that = this
            // var config = {
            //     needSubInfo: false,
            //     needAll: true,
            //     needPolygon: false,
            //     needPre: false,
            //     searchType: 1,
            //     searchWord: "中华人民共和国" //156000000
            // };
            // administrative.search(config, function(result) {
            //     if(result.getStatus() == 100) {
            //         let r = result.getData()
            //         that.options = r[0].child
            //         that.groupData(that.options)
            //     } else {
            //         console.error(result.getMsg())
            //     }
            // });
            //下载到本地加载
            let r = tdt_AreaResult.data
            this.options = r.child
            this.groupData(this.options)
        },

        groupData(data) {
            if(data) {
                data.forEach(d=>{
                    d.lnglat = {
                        'lng': d.lnt,
                        'lat': d.lat
                    }
                    if(d.child && d.child.length > 0) {
                        this.groupData(d.child)
                    }
                })
            }
        },

        //行政区划查询结果
        handleChange(value) {
            //不设置选择功能
            let level = value.length
            if(level > 0) {
                let c = value[level - 1]
                this.tdtMap.centerAndZoom(new T.LngLat(c.lng, c.lat), 6 + (level*2));
            }
        },

    },
    template: `
        <div :style="{ width: '100%', height: height, position: 'relative' }">
            <div id="mapDiv" :style="{ width: '100%', height: '100%' }"></div>
            <el-cascader v-model="selectArea" :loading="true" placeholder="跳转到行政区域" clearable :options="options" 
                @expand-change="handleChange" 
                @change="handleChange"
                :props="{value:'lnglat', label:'name', children:'child'}" 
                style="position: absolute; top: 6px; left: 6px; z-index: 999"></el-cascader>
        </div>
    `
});